
.main {
  width: 100vw;
  height: 100vh;
  background: center url("../../assets/img.png");
  background-size: cover;
  position: relative;

  .wrapper {
    display: inline-flex;
    align-items: flex-end;
    height: 60px;
    padding: 10px;

    background-color: rgba(250, 250, 250, .1);

    border-radius: 8px;
    backdrop-filter: blur(5px);

    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 10px;

    .item {
      border-radius: 8px;
      width: calc(var(--scale) * 60px);
      height: calc(var(--scale) * 60px);
      margin-left: calc(var(--scale) * 5px);
      margin-right: calc(var(--scale) * 5px);
      margin-bottom: calc(var(--scale) * 15px - 15px);
      transition: all calc(var(--transition-duration) * 1s);
    }
  }
}


